<template>
	<view class="online_order">
		<!-- 导航 -->
		<u-navbar back-text="提交订单" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<view v-if="shows" style="text-align: center;padding-bottom: 100rpx;">
			<view style="padding: 70rpx 0 24rpx 0;">还没有地址哦~快去添加地址吧~</view>
			<u-button size="medium" shape="circle" :plain="true" type="warning" @click="adds()">去添加地址</u-button>
		</view>
		<view v-else>
			<view class="biaozhu">
				<image src="../../static/icon/gantan.png" mode=""></image>
				<view class="write" style="margin-left: 22rpx;">地址会做隐私处理，订单确认前不会告知商家详细地址</view>
			</view>
			<view class="head">
				<view>
					<text class="namm">{{ address.contactsName }}</text>
					<text class="namm" style="font-size: 26rpx;padding-left: 20rpx;">{{ address.contactsPhone }}</text>
				</view>
				<view class="serve">
					<view>服务地址：</view>
					<view class="fuwu" @click="getAddress()">
						<view class="dizhi">{{ address.province }}{{ address.city }}{{ address.region }}{{ address.address }}</view>
						<image src="../../static/icon/jian.png" mode=""></image>
					</view>
				</view>
				<view class="contact">
					<text class="xiang">详细地址：</text>
					<text class="ads">{{ address.address }}</text>
				</view>
			</view>
		</view>
		<image src="../../static/icon/dixian.png" mode="" style="width: 100%;height: 4rpx;"></image>

		<view class="lists">
			<view class="word" style="width: 60%;">{{ name }}</view>
			<view style="font-size: 26rpx;color: #F29423;">
				￥
				<text style="font-size: 38rpx;font-weight: bold;">{{ unitPrice }}</text>
			</view>
		</view>
		<view class="lists">
			<view class="word">数量</view>
			<u-number-box v-model="value" @change="valChange"></u-number-box>
		</view>
		<view class="lists">
			<view class="word">共计</view>
			<view style="font-size: 26rpx;color: #F29423;">
				￥
				<text style="font-size: 38rpx;font-weight: bold;">{{ unitPrices }}</text>
			</view>
		</view>
		<view class="lists">
			<view class="word">上门时间</view>
			<view class="xuanze" @click="show = true" style="justify-content: flex-end;">
				<view style="margin-right: 15rpx;">{{ result == '' ? '请选择时间' : result }}</view>
				<image  src="../../static/icon/jian.png" mode="" style="width: 10rpx;height: 18rpx;padding-left: 20rpx;"></image>
			</view>
		</view>
		<u-select
			style="line-height: 32rpx;width: 4%;"
			title="选择开始时间"
			v-model="show"
			mode="mutil-column-auto"
			:list="list"
			confirm-color="#FCC800"
			@confirm="confirm"
		></u-select>
		<!-- <view class="lists">
			<view class="word">余额抵扣(可使用余额{{ usedBalances }})</view>
			<view style="font-size: 26rpx;color: #F29423;">
				<view class="uni-list">
					<radio-group @change="radioChange" style="display: flex;">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value" style="display: flex;align-items: center;">
							<view><radio :value="item.value" :checked="index === current" color="#FCA800" style="transform:scale(0.7)" /></view>
							<view>{{ item.name }}</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view> -->
		<view class="remark">
			备注
			<view>
				<textarea maxlength="200" value="" v-model="comments" placeholder="请输入您的备注信息" placeholder-style="color:#e4e4e4" style="height: 240rpx;width: 100%;" />
			</view>
		</view>
		<view style="height: 150rpx;"></view>

		<view class="foot">
			<view class="sales">
				<view style="font-size: 38rpx;margin-right: 12rpx;">
					￥
					<text style="font-size:60rpx;">{{ unitPrices }}</text>
				</view>
				<view class="price">
					<view class="tgPrice">团购价</view>
					<view class="msPrice" style="color: #909399;">
						门市价
						<text style="font-size: 20rpx;color: #909399;">￥</text>
						<text style="font-size: 26rpx;color: #909399;">{{ (showPrice * 1).toFixed(2) }}</text>
					</view>
				</view>
			</view>
			<view class="positin"><view class="call" @click="payOrder()">立即下单</view></view>
		</view>
		<u-toast ref="uToast" />
		<!-- 选择支付 -->
		<u-popup mode="bottom" v-model="payorder">
			<view style="width: 100%;position: absolute;top: 0;left: 0;">
				<view style="width: 92%;position: relative;margin:0 auto;">
					<view style="width: 100%;text-align: left;font-size: 30rpx;font-weight: bold;line-height: 80rpx;">选择支付方式</view>
					<image
						@click="payorder=false"
						style="position: absolute;top: 26rpx;right: 24rpx;width: 24rpx;height: 24rpx;position: absolute;"
						src="https://beedao.oss-cn-beijing.aliyuncs.com/94babc7b1aa54980a1abb68a5319c31f.png"
						mode=""
					></image>
				</view>
			</view>
			<view class="content" style="width: 92%;margin: auto;margin-top: 94rpx;">
				<view style="margin-bottom: 20rpx;">
					<view style="display: flex;justify-content: space-between;padding: 20rpx 0;border-bottom: 1rpx solid #D8D8D8;" @click="userInfoVO.money > unitPrices?setPayType(2):''">
						<view style="display: flex;">
							<view style="display: flex;justify-content: center;align-items: center;">
								<image style="width: 38rpx;height: 38rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/3a026cf316644413ad1898dc6841881c.png" mode=""></image>
							</view>
							<view style="color: #757575;margin-left: 10rpx;display: flex;justify-content: center;align-items: center;">余额支付（剩余￥{{userInfoVO.money? userInfoVO.money : 0}}）</view>
						</view>
						<view v-if="userInfoVO.money > unitPrices" style="padding: 8rpx 16rpx;display: flex;justify-content: center;align-items: center;">
							<image style="width: 36rpx;height: 36rpx;" :src="payType == '1' ? payImg.xImg :payImg.noImg" mode=""></image>
						</view>
						<view @click="goMnmber" v-else style="padding: 8rpx 16rpx;display: flex;justify-content: center;align-items: center;color: #676767;">
							{{userInfoVO.member ? "立即续费" : "立即开通"}}
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;padding: 20rpx 0;border-bottom: 1rpx solid #D8D8D8;" @click="setPayType(1)">
						<view style="display: flex;">
							<view style="display: flex;justify-content: center;align-items: center;">
								<image style="width: 38rpx;height: 36rpx;" src="https://beedao.oss-cn-beijing.aliyuncs.com/297779f071654a9689c790b6395d5eaf.png" mode=""></image>
							</view>
							<view style="color: #757575;margin-left: 10rpx;display: flex;justify-content: center;align-items: center;">微信支付</view>
						</view>
						<view style="padding: 8rpx 16rpx;display: flex;justify-content: center;align-items: center;">
							<image style="width: 36rpx;height: 36rpx;" :src="payType == '2' ? payImg.xImg :payImg.noImg" mode=""></image>
						</view>
					</view>
					
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;padding:12rpx 0rpx 20rpx 0rpx;" >
					<view class="writes">
						<text style="color: #757575;font-size:36rpx;">实付款：</text>
						<text style="color: #FFAA00;font-size:34rpx;">￥</text>
						<text style="color: #FFAA00;font-size: 40rpx;font-weight: bold;">{{ unitPrices ? unitPrices : 0 }}</text>
					</view>
					<view
						@click="clickPay?promptlyPay():''"
						style="width: 48%;height: 88rpx;border-radius: 12rpx;background-color: #FCC800;text-align: center;font-size: 34rpx;color: #323332;line-height: 88rpx;"
					>
						立即支付
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			clickPay:true,
			payType:2,
			payImg:{
				xImg:"https://beedao.oss-cn-beijing.aliyuncs.com/3307a934f8774ccc944183d42934e369.png",
				noImg:"https://beedao.oss-cn-beijing.aliyuncs.com/e680513bfd854e33be8f67a06f376a27.png"
			},
			payorder:false,
			userInfoVO:{},//用户信息
			textStyle: {
				color: '#272755'
			},
			value: 1,
			shows: false,
			address: '',
			items: [
				{
					name: '是',
					value: '1'
					// checked: 'false'
				},
				{
					name: '否',
					value: '0'
				}
			],
			current: 0,
			check: 0,
			show: false,
			list: [],
			result: '',
			addressId: '',
			count: '1',
			packageBusinessId: '',
			comments: '',
			name: '',
			showPrice: '',
			unitPrice: '',
			unitPrices: 0,
			price: '', // 单价
			totalPrice: '', // 总价
			totalPay: '', // 总支付金额
			usedBalances: '' ,// 	使用的余额
		};
	},
	onLoad(option) {
		that = this;
		this.packageBusinessId = option.packageBusinessId;
		this.showPrice = option.showPrice;
		this.unitPrice = option.unitPrice;
		this.unitPrices = option.unitPrice;
		this.name = option.name;
		this.getAddressList(); // 获取默认地址
		this.getDatas(); // 获取当前时间
		this.getpayInfo();
		// 获取用户信息
		this.getUserInfo();
	},
	onShow() {
	},
	methods: {
		// 去会员页面
		goMnmber(){
			uni.navigateTo({
				url: '../member/meCenter'
			})
		},
		// 选中支付方式
		setPayType(type){
			this.payType=type;
		},
		// 用户信息
		getUserInfo() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user/info'
			};
			let data = {}; 
			_this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == "200") {						
					_this.userInfoVO = res.data.userInfoVO;
					_this.userInfoVO.money=parseFloat(_this.userInfoVO.money);
				}
			});
		},
		valChange(e) {
			let _this = this;
			_this.count = e.value;
			_this.getpayInfo();
			setTimeout(function() {
				if (_this.check == 1) {
					this.unitPrices = (this.totalPrice - this.usedBalances).toFixed(2);
				} else {
					_this.unitPrices = _this.totalPrice.toFixed(2);
				}
			}, 500);
		},
		//点击确定的值
		confirm(e) {
			this.result = e[0].label + ' ' + e[1].label + ':00';
			this.isShow = false;
		},
		radioChange: function(evt) {
			// let _this = this;
			// for (let i = 0; i < _this.items.length; i++) {
			// 	if (_this.items[i].value === evt.target.value) {
			// 		_this.current = i;
			// 		break;
			// 	}
			// }
			// _this.check = evt.target.value;
			// _this.getpayInfo();
		},
		// 获取默认地址
		getAddressList() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'user-address/first'
			};
			this.http.httpTokenRequest(opts).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					if (res.data) {
						this.address = res.data;
						this.addressId = res.data.addressId;
						this.shows = false;
					} else {
						this.shows = true;
					}
				}
			});
		},
		// 获取地址
		getAddress() {
			uni.navigateTo({
				url: '../personal/address?type=1'
			});
		},
		// 获取套餐订单信息
		getpayInfo() {
			var _this = this;
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/package/pay/info'
			};
			let data = {
				packageBusinessId: _this.packageBusinessId,
				addressId: _this.addressId,
				count: _this.count == 1 ? 1 : _this.count,
				serviceStartTime: _this.result,
				comments: _this.comments,
				useBalanceFlag: 0,
			};
			_this.http.httpTokenRequest(opts, data).then(res => {
				//打印请求返回的数据
				if (res.code == '200') {
					this.price = res.data.price; // 单价
					this.totalPrice = res.data.totalPrice; // 总价
					this.totalPay = res.data.totalPay; // 总支付金额
					this.usedBalances = 0; // 	使用的余额
					this.unitPrices = parseFloat(this.totalPrice);

				}
			});
		},
		// 立即支付
		promptlyPay(){
			if (that.result == '') {
				that.$refs.uToast.show({
					title: '请选择上门时间',
					type: 'error'
				});
				return;
			}
				that.clickPay=false;
				var _this = this;
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'unit-orders/createPackage'
				};
				let data = {
					packageBusinessId: _this.packageBusinessId,
					addressId: _this.addressId,
					count: _this.count == 1 ? 1 : _this.count,
					serviceStartTime: _this.result,
					comments: _this.comments,
					useBalanceFlag: 0,
					payType:_this.payType,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						var needstr = res.data;
						uni.requestSubscribeMessage({
							tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
							success(res) {
								if (needstr.needPay == 0) {
									uni.redirectTo({
										url: './paySucess?type=1' + '&orderId=' + needstr.orderId + '&taocan=1'
									});
									_this.clickPay=true;
									_this.payorder=false;
								} else {
									_this.wxpay(needstr.vxPayData, needstr.orderId);
								}
							},
							fail(err) {
								if (needstr.needPay == 0) {
									uni.redirectTo({
										url: './paySucess?type=1' + '&orderId=' + needstr.orderId + '&taocan=1'
									});
									_this.clickPay=true;
									_this.payorder=false;
								} else {
									_this.wxpay(needstr.vxPayData, needstr.orderId);
								}
							}
						});
					} else {
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					}
				});
		},
		// 点击支付拉起支付弹框
		payOrder() {
			this.payorder=true;
		},
		wxpay(str, orderId) {
			let _this = this;
			let query = str;
			uni.requestPayment({
				provider: 'wxpay',
				appId: query.appId,
				timeStamp: query.timeStamp + '',
				nonceStr: query.nonceStr,
				package: query.package,
				signType: query.signType,
				paySign: query.sign,
				success: res => {
					uni.redirectTo({
						url: './paySucess?type=1' + '&orderId=' + orderId + '&taocan=1'
					});
					_this.clickPay=true;
					_this.payorder=false;
				},
				fail: res => {
					_this.clickPay=true;
					_this.payorder=false;
					_this.$refs.uToast.show({
						title: '支付失败',
						type: 'error'
					});
					// uni.navigateTo({
					// 	url: './paySucess'
					// })
				}
			});
		},
		adds() {
			uni.navigateTo({
				url: '../personal/addAddress?type=0'
			});
		},
		// 请选择时间
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var year = date.getFullYear();
			var mon = date.getMonth() + 1;
			var day = date.getDate();
			if (mon <= 9) {
				//如果小于9的话，则需要加上0
				mon = '0' + mon;
			} //getdate()返回的是1-31，则不需要加1
			if (day <= 9) {
				//如果小于9的话，则需要加上0
				day = '0' + day;
			}
			var showDate = year + '-' + mon + '-' + day;
			var nextData = '';
			for (var i = 1; i <= 29; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				var mons = date.getMonth() + 1;
				if (mons <= 9) {
					mons = '0' + mons;
				}
				var days = date.getDate();
				if (days <= 9) {
					days = '0' + days;
				}
				nextData = date.getFullYear() + '-' + mons + '-' + days;
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			var datas = [
				{
					value: 2,
					label: '08:00'
				},
				{
					value: 3,
					label: '09:00'
				},

				{
					value: 4,
					label: '10:00'
				},
				{
					value: 5,
					label: '11:00'
				},
				{
					value: 6,
					label: '12:00'
				},
				{
					value: 7,
					label: '13:00'
				},
				{
					value: 8,
					label: '14:00'
				},

				{
					value: 9,
					label: '15:00'
				},
				{
					value: 10,
					label: '16:00'
				},
				{
					value: 11,
					label: '17:00'
				},
				{
					value: 12,
					label: '18:00'
				},
				{
					value: 13,
					label: '17:00'
				}
			];
			var nowtime = date.getHours();
			var indexs = null;
			if(nowtime < parseInt(datas[0].label.substring(0, 2))){
				indexs = 0;					
			}else{	
				datas.forEach((item, index) => {
					var tex = parseInt(item.label.substring(0, 2));
					if (parseInt(item.label.substring(0, 2)) == nowtime) {
						indexs = index;
					}
				});
			}
			this.arrayInex = datas.splice(0, indexs + 4);
			var items = [];
			if (19 > nowtime) {
				items.push({
					value: 1,
					label: showDate
				});
			}
			if(datas.length == 0){
				items=arr;
			}else{
				items = items.concat(arr);
			}
			
			items.forEach((item, index) => {
				if (index == 0 && datas.length > 0) {
					item.children = datas;
				} else{
					item.children = [
						{
							value: 2,
							label: '08:00'
						},
						{
							value: 3,
							label: '09:00'
						},

						{
							value: 4,
							label: '10:00'
						},
						{
							value: 5,
							label: '11:00'
						},
						{
							value: 6,
							label: '12:00'
						},
						{
							value: 7,
							label: '13:00'
						},
						{
							value: 8,
							label: '14:00'
						},

						{
							value: 9,
							label: '15:00'
						},
						{
							value: 10,
							label: '16:00'
						},
						{
							value: 11,
							label: '17:00'
						},
						{
							value: 12,
							label: '18:00'
						},
						{
							value: 13,
							label: '19:00'
						}
					];
				}
			});
			this.list = items;
			// this.result = this.list[0].label + ' ' + this.list[0].children[0].label
		}
	}
};
</script>

<style scoped lang="scss">
.head {
	background: #ffffff;
	// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	opacity: 1;
	border-radius: 5px;
	// margin: 22rpx 48rpx;
	// padding: 0rpx 26rpx;
	padding: 30rpx 46rpx 26rpx 45rpx;
	color: #7a7a7a;
	font-size: 30rpx;
	font-weight: 400;
}

.fenlei {
	display: flex;
	flex-wrap: wrap;
	padding: 16rpx 24rpx 0 42rpx;
}

.type {
	background: #ffffff;
	border: 1px solid #fca800;
	opacity: 1;
	border-radius: 52rpx;
	padding: 0 13px;
	line-height: 80rpx;
	font-size: 26rpx;
	text-align: center;
	font-family: PingFang SC;
	font-weight: 400;
	margin-right: 20rpx;
	margin-top: 10rpx;
}

.type image {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	bottom: -20%;
	right: -10%;
}

.fen_type .tai {
	font-size: 30rpx;
}

.serve {
	font-size: 26rpx;
	color: #7a7a7a;
	font-weight: 400;
	display: flex;
	// justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}

.fuwu {
	display: flex;
	align-items: center;
}

.fuwu image {
	width: 10rpx;
	height: 18rpx;
}

.dizhi {
	width: 518rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 26rpx;
	color: #7a7a7a;
	font-weight: 400;
	padding-left: 16rpx;
}

.contact {
	margin-top: 18rpx;
}

.namm {
	// padding-left: 16rpx;
	font-size: 30rpx;
	color: #7a7a7a;
	font-weight: bold;
}

.ads {
	padding-left: 16rpx;
	font-size: 26rpx;
}

.xiang {
	width: 200rpx;
	font-size: 26rpx;
}

.biaozhu {
	color: #f86565;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	height: 64rpx;
	padding-left: 28rpx;
	padding-right: 18rpx;
	background-color: #fff4de;
	line-height: 64rpx;
}

.biaozhus {
	color: #f86565;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	height: 64rpx;
	padding-left: 28rpx;
	padding-right: 90rpx;
	line-height: 64rpx;
}

.biaozhus image {
	width: 29rpx;
	height: 29rpx;
}

.biaozhu image {
	width: 29rpx;
	height: 29rpx;
}

.lists {
	padding: 34rpx 42rpx 28rpx 48rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e4e4e4;
}
.lists .word {
	color: #7a7a7a;
	font-size: 30rpx;
}
.remark {
	padding: 34rpx 42rpx 28rpx 48rpx;
	color: #7a7a7a;
	font-size: 30rpx;
}
.remark view {
	height: 274rpx;
	border: 2rpx solid #707070;
	padding: 20rpx 24rpx;
	margin-top: 34rpx;
}

.foot {
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	// text-align: center;
	font-size: 26rpx;
	color: #707070;
	padding: 18rpx 0;
}
.sales {
	width: 50%;
	display: flex;
	color: #f29423;
	align-items: center;
	height: 62rpx;
}
.price text {
	text-decoration: line-through;
}
.tgPrice {
	font-size: 20rpx;
	border: 2rpx solid #f29423;
	width: 66rpx;
	text-align: center;
	border-radius: 4rpx;
}
.msPrice {
	color: #e4e4e4;
	font-size: 24rpx;
}

.call {
	width: 196rpx;
	height: 100rpx;
	background-color: #f29423;
	color: #ffffff;
	font-size: 34rpx;
	font-weight: bold;
	line-height: 100rpx;
	border-radius: 32rpx;
	text-align: center;
	margin-left: 36rpx;
}
.xuanze {
	display: flex;
	align-items: center;
	width: 50%;
	font-size: 26rpx;
	color: #7a7a7a;
	justify-content: space-between;
}
</style>
